<template>
    <div>
        <h3>房价计划</h3>
        <input type="button" value="增加" @click="add">
        <div>
            名称:<input type="text" v-model="a.name" />
            <input type="button" value="查询" @click="getlist">
            <input type="button" value="批量删除" @click="delall">
            <input type="button" value="批量启用" @click="updateall(1)">
            <input type="button" value="批量禁用" @click="updateall(0)">
            <input type="button" value="导出" @click="expect">
            <input type="file" @change="importfn">
            <input type="button" value="导入" @click="abc">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkall"></td>
                    <td>房价计划名称</td>
                    <td>门店</td>
                    <td>房型名称</td>
                    <td>房型价格</td>
                    <td>房间数量</td>
                    <td>状态</td>
                    <td>早餐数量</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" @change="checkone" :value="item.Id"></td>
                    <td>{{ item.HousePriceName }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.State == 1 ? "启用" : "禁用" }}</td>
                    <td>{{ item.BreakfastCount }}</td>
                    <td>{{ moment(item.BeginTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ moment(item.EndTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td><input type="button" value="删除" @click="del(item.Id)" />
                        <input type="button" value="修改" @click="update(item.Id)" />
                        <input type="button" value="启用" v-if="item.State==0" @click="updatestate(item.Id,1)" />
                        <input type="button" value="禁用" v-if="item.State==1" @click="updatestate(item.Id,0)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.zongHang }}行</span>
            <span>每页{{ a.pageHang }}行</span>
            <span>当前第{{ a.pageYe }}/{{ data.zongYe }}页</span>
            每页<select v-model="a.pageHang" @change="show">
                <option :value="item" v-for="item in arr">{{ item }}</option>
            </select>行
            <input type="button" value="首页" @click="goPage(1)" />
            <input type="button" value="上一页" @click="goPage(a.pageYe - 1)" />
            <span v-for="item in data.zongYe" @click="goPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="goPage(a.pageYe + 1)" />
            <input type="button" value="尾页" @click="goPage(data.zongYe)" />
            <input type="number" v-model="a.pageYe">
            <input type="button" value="跳转" @click="goPage(a.pageYe)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

const add: any = () => {
    router.push("/addhouseprice")
}

onMounted(() => {
    show();
})

let checked = ref(false);

let ids = ref([]);

let arr = ref([1, 2, 3, 4])

let a: any = reactive({
    pageYe: 1,
    pageHang: 2,
    name: ''
})

let data: any = reactive({
    list: [],
    zongHang: '',
    zongYe: ''
})

let  obj=ref();
const importfn:any=(e:any)=>{
   obj.value=e.target.files[0]
}

const abc:any=()=>{
    if(obj.value==null)
    {
        alert("没选文件");
        return;
    }
    let f=new FormData();
    f.append('file',obj.value);
    axios({
        url:'/api/HousePricePlan/Importexcel',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
        {
            alert("成功");
            show();
        }
        else{
            alert("失败");
            return;
        }
    })
}

const expect:any=()=>{
    location.href="https://localhost:7035/api/HousePricePlan/Except"
}

const update:any=(id:any)=>{
router.push({
    path:"/housepriceupdate",
    query:{id:id}
})
}

const updateall:any=(state:any)=>{
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    updatestate(ids.value.toString(),state)
    checked.value=false
    ids.value=[]
}

const updatestate: any = (id: any,state:any) => {
    axios({
        url: '/api/HousePricePlan/Updatestateall',
        method: 'put',
        params: { ids: id,
            state:state
         }
    })
        .then((res) => {
            if (res.data > 0) {
                alert("修改成功");
                show();
            }
        })
}

const delall: any = () => {
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    del(ids.value.toString());
}

const del: any = (id: any) => {

    let f = confirm("确认删除");
    if (f) {
        axios({
            url: '/api/HousePricePlan/Delall',
            method: 'delete',
            params: { ids: id }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                }
            })
    }
}

const checkall: any = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = []
    }
}

const checkone: any = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

const goPage = (num: any) => {
    if (num < 1) {
        a.pageYe == 1;
        return;
    }
    if (num > data.zongYe) {
        a.pageYe == data.zongYe;
        return;
    }
    a.pageYe = num;
    show();
}

const getlist: any = () => {
    a.pageYe = 1;
    show();
}

const show: any = () => {
    axios({
        url: '/api/HousePricePlan/GetHousePricePlans',
        method: 'get',
        params: a
    })
        .then((res) => {
            data.list = res.data.list
            data.zongHang = res.data.zongHang
            data.zongYe = res.data.zongYe
        })
}

</script>

<style scoped>
span {
    margin: 0 5px;
}

input {
    margin: 0 5px;
}
</style>